---
title: Cool Mode
date: 2024-06-01
description: Cool mode effect for buttons, links, and other DOMs
author: nyxb
published: true
---

<ComponentPreview name="cool-mode-demo" />


### Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyxb@latest add cool-mode
```

</TabsContent>

<TabsContent value="manual">

<Steps>

Copy and paste the following code into your project.

```text
components/ui/cool-mode.tsx
```

<ComponentSource name="cool-mode" />

</Steps>

</TabsContent>

</Tabs>

## Examples

### Custom Particle

<ComponentPreview name="cool-mode-custom" />

## Props

| Prop                      | Type                      | Description                                                  | Default  |
| ------------------------- | ------------------------- | ------------------------------------------------------------ | -------- |
| particle                  | String                    | The particle URL for a custom particle                       | "circle" |
| size                      | Number                    | Size of the particle                                         |  Varies  |
| particleCount             | Number                    | The number of particles to generate                          |  Varies  |
| speedHorz                 | Number                    | Horizontal speed of the particles                            |  Varies  |
| speedUp                   | Number                    | Upward speed of the particles                                |  Varies  |


## Credits

- Inspired by [ClickFusion](https://github.com/BankkRoll/ClickFusion)
